<template>
	<div>
		<div id="audio"></div>
		<wd-header>
	        <span class="iconfont" @click="goback" slot="left">&#xe697;单词详情</span>
		</wd-header>
		<div class="header">
			<ul>
				<li>
					<span></span>
					<h3>{{word}}</h3>
					<!-- <span v-show="isBuy" class="iconfont" @click="cl_or_uncl()">&#xe60f;</span> -->
					<!-- <span v-show="isBuy == 1" :class="['iconfont',isCollect == 0 ? '' : 'hadCollect']">&#xe60f;</span> -->
				</li>
				<li>
					<span>{{phonetic}}</span>
					<span class="iconfont" @click="speak">&#xe702;</span>
				</li>
				<li>{{explain}}</li>
			</ul>
		</div>
		<div class="container">
			<div class="top">
				<p>
					<span class="redcircle">图</span>
					<span>图片</span>
				</p>
				<img :src="imgurl">
			</div>
			<div class="middle">
				<p>
					<span class="redcircle">拆</span>
					<span>拆分</span>
				</p>
				<p>{{split}}</p>
			</div>
			<div class="bottom">
				<p>
					<span class="redcircle">联</span>
					<span>联想</span>
				</p>
				<p v-html="lenovo"></p>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'singleword',
  data () {
    return {
    	auth: JSON.parse(localStorage.user),
    	collect:'http://www.jydsapp.com/jydsApi/api/h5/study/collectionWord',
    	un_collect:'http://www.jydsapp.com/jydsApi/api/h5/study/cancelCollectionWord'
    }
  },
  computed:{
  	isBuy(){
  		return this.$store.state.word_indexto_singlebook_or_buy_data.paytype  //是否已经购买当前课程
  	},
  	isCollect(){
  		return this.$store.state.singleword_need_data.collect
  	},
  	word(){
  		return this.$store.state.singleword_need_data.word
  	},
  	phonetic(){
  		return this.$store.state.singleword_need_data.phonetic
  	},
  	explain(){
  		return this.$store.state.singleword_need_data.explain
  	},
  	imgurl(){
  		let temp = this.$store.state.singleword_need_data.imgurl
  		return temp == '#' ? 'http://omj0etkcd.qnssl.com/blank.png' : temp
  	},
  	split(){
  		return this.$store.state.singleword_need_data.split
  	},
  	lenovo(){
  		return this.$store.state.singleword_need_data.lenovo.replace('~',`<span style="color:#fe4f4a">`).replace('~',`</span>`)
  	},
  	unitid(){
  		return this.$store.state.word_singlebookto_unitwordslist_data.unitid
  	},
  	classid(){
  		return this.$store.state.word_singlebookto_unitwordslist_data.classid
  	},
  	wordid(){
  		return this.$store.state.singleword_need_data.wordid
  	}
  },
  methods:{
  	goback(){
  		this.$router.go(-1)
  	},
  	speak(){
	    var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(this.word)
	    var n = new Audio(url);
	    n.src = url;
	    n.play();　　　
	},
	cl_or_uncl(ev){
		/*let str = `{"userPhone":"${this.auth.user.phoneNum}","token":"${this.auth.token}","classId":"${this.classid}","unitId":"${this.unitid}","wordId":"${this.wordid}"}`
		ev = ev || window.event
		let flag = 1
		console.log(ev.srcElement.innerHTML)
		if(flag == 1){
			ev.srcElement.innerHTML = "&#xe612;"
			flag = 0
		}else if(flag == 0){
			ev.srcElement.innerHTML = "&#xe60f;"
			flag = 1
		}
		this.fetch({
		    method: 'post',
		    url: this.collect,
		    params: {
		        "paramStr": str
		    }
		}).then((data) => {
		    let res = data.data
		    if (res.code == 200) {
				console.log(res)		        
		    } else {
		        console.log(res.message)
		    }
		}).catch((err) => {

		})*/
	}
  }
}
</script>

<style lang="scss" scoped>
.header{
	ul{	
		display: flex;
		flex-direction:column;
		align-items:center;
		justify-content:space-around;
		padding: 0.277778rem 0;
		background: #eee;

		li{
			padding: 0.185185rem;

			&:nth-child(1){
				width: 100%;
				text-align: center;
				font-size: 0.555556rem;
				position: relative;
				h3{
					color: #fe4f4a;
					font-weight: bold;
				}
				.iconfont{
					position: absolute;
					right: 8%;
					top: 50%;
					transform:translateY(-50%);
				}

				.iconfont.hadCollect{
					position: absolute;
					right: 8%;
					top: 50%;
					transform:translateY(-50%);
					background: #fe4f4a;
				}
			}
			
			&:nth-child(2){
				width: 35%;
				display: flex;
				justify-content:space-around;
				align-items:center;
			}

		}
	}
	.iconfont{
		color:#fe4f4a;
	}
}
.container{
	padding: 0.277778rem 0.277778rem;

	& > div{
		padding: 0.185185rem 0;
	}
	
	.redcircle{
		color: #fe4f4a;
		padding: 2px;
		border-radius: 2px;
		border: 1px solid #fe4f4a;
	}
	
	.top{
		display: flex;
		flex-direction:column;
		img{
			width: 75%;
			align-self:center;
		}
	}

	.middle{
		border-bottom: 1px solid #eee;
	}
	
	.top,.middle,.bottom{

		p:nth-child(1){
			margin: 15px 0;
		}
	}
}
</style>